import React, { Component } from 'react'

class App extends Component {
  //定义响应数据
  state = {
    count: 0,
    str: 'hi state',
    obj: { name: '大黄', age: 12, desc: '哈哈哈哈.' },
    arr: [123, 23, 4],
  }
  // 点击加1
  add = () => {
    // react 数据不可变 不能用 = 赋值修改
    // this.state.count = 100
    // 正确姿势
    // this.setState是Component 弗雷提供的方法
    this.setState({
      count: this.state.count + 1,
      obj: { ...this.state.obj, age: 10 },
    })
  }
  render() {
    return (
      <div>
        <h1>类组件状态(响应数据)</h1>
        <ul>
          <li>{this.state.count}</li>
          <li>{this.state.str}</li>
          <li>
            {this.state.obj.name}--{this.state.obj.age}--{this.state.obj.desc}
          </li>
          <li>{this.state.arr}</li>
          <li>
            <button onClick={this.add}>add</button>
          </li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
      </div>
    )
  }
}
export default App
